<template>
  <div class="user-layout">
    <!-- 顶部导航栏 -->
    <div class="top-navbar">
      <div class="logo">
        <span>再生道环保</span>
      </div>
      <div class="user-info">
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="user-dropdown-link">
            <i class="el-icon-user"></i> {{ userName || '用户' }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="profile">个人资料</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <div class="main-container">
      <!-- 左侧菜单栏 -->
      <div class="sidebar">
        <el-menu
          :default-active="activeMenu"
          class="sidebar-menu"
          background-color="#f0f9eb"
          text-color="#303133"
          active-text-color="#67c23a"
          router
        >
          <el-menu-item index="/user/orders">
            <i class="el-icon-s-order"></i>
            <span>我的订单</span>
          </el-menu-item>
          <el-menu-item index="/user/recycletype">
            <i class="el-icon-s-goods"></i>
            <span>废品回收</span>
          </el-menu-item>
          <el-menu-item index="/user/place-order">
            <i class="el-icon-plus"></i>
            <span>立即下单</span>
          </el-menu-item>
          <el-menu-item index="/user/profile">
            <i class="el-icon-user"></i>
            <span>个人资料</span>
          </el-menu-item>
        </el-menu>
      </div>

      <!-- 右侧内容区 -->
      <div class="content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserLayout',
  data() {
    return {
      userName: '',
    }
  },
  computed: {
    activeMenu() {
      return this.$route.path
    }
  },
  methods: {
    handleCommand(command) {
      if (command === 'profile') {
        this.$router.push('/user/profile')
      } else if (command === 'logout') {
        this.logout()
      }
    },
    logout() {
      this.$confirm('确定要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 清除本地存储的用户信息
        localStorage.removeItem('userId')
        localStorage.removeItem('token')
        localStorage.removeItem('currentChatOrder')
        
        // 跳转到登录页
        this.$router.push('/user/login')
        this.$message.success('已退出登录')
      }).catch(() => {
        // 取消退出
      })
    },
    getUserInfo() {
      const userId = localStorage.getItem('userId')
      if (userId) {
        // 可以在这里调用接口获取用户信息
        this.$http.get('/userService/user/getUserInfo', {
          params: { userId }
        }).then(response => {
          if (response.data.code === 200) {
            this.userName = response.data.data.name || '环保用户'
          }
        }).catch(() => {
          this.userName = '环保用户'
        })
      } else {
        this.$router.push('/user/login')
      }
    }
  },
  mounted() {
    this.getUserInfo()
  }
}
</script>

<style scoped>
.user-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.top-navbar {
  height: 60px;
  background-color: #67c23a;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-dropdown-link {
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.main-container {
  display: flex;
  flex: 1;
}

.sidebar {
  width: 220px;
  background-color: #f0f9eb;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.05);
}

.sidebar-menu {
  border-right: none;
}

.content {
  flex: 1;
  padding: 20px;
  background-color: #f5f7fa;
  overflow-y: auto;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-container {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    margin-bottom: 20px;
  }
  
  .sidebar-menu {
    display: flex;
    justify-content: space-around;
  }
  
  .el-menu-item {
    flex: 1;
    text-align: center;
  }
  
  .el-menu-item span {
    display: none;
  }
  
  .el-menu-item i {
    margin-right: 0;
  }
}
</style> 